<!-- 
	轮播图组件 
	1、轮播图设置：图片圆角、背景颜色、上边距、下边距、左边距、右边距
	2、轮播图片数组
-->
<template>
	<div class="component-wrapper">
		<img v-if="list.length == 0" :style="wrapper_style" :src="defaultUrl" alt="">
		<div v-if="list.length == 1" :style="wrapper_style">
			<image :style="img_style" :src="list[0].image" alt="" />
		</div>
		<uni-swiper-dot :info="list" :current="current" field="content" :mode="mode" :dots-styles="dotsStyles">
			<swiper class="swiper-box" @change="change">
				<swiper-item v-for="(item ,idx) in list" :key="idx">
					<div class="list-image" v-if="item.image" :style="wrapper_style" @click="navigateTo(item)">
						<image :src="item.image" alt="" :style="img_style" mode="aspectFill">
					</div>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<!-- <Swiper v-if="list.length > 1" :options="swiperOption" ref="mySwiper">
			<Swiper-slide v-for="(item, idx) in list" :key="idx">
				<div class="list-image" v-if="item.image" :style="wrapper_style" @click="navigateTo(item)">
					<img :src="item.image" alt="" :style="img_style">
				</div>
			</Swiper-slide>
			<div class="swiper-pagination" slot="pagination"></div>
		</Swiper> -->
	</div>
</template>

<script>
	// import 'swiper/css/swiper.css'
	// import {
	// 	Swiper,
	// 	SwiperSlide
	// } from 'vue-awesome-swiper';
	import defaultUrl from '@/static/images/banner.png';
	export default {
		name: 'u_slideshow',
		props: {
			data: {
				type: Object,
				default () {
					return {
						//图片圆角
						"pictureBorder": {
							type: Number,
							default: 0
						},
						//背景颜色
						"bgColor": {
							type: String,
							default: '#ffffff'
						},
						//上边距
						"paddingTop": {
							type: Number,
							default: 0
						},
						//下边距
						"paddingBottom": {
							type: Number,
							default: 0
						},
						//左边距
						"paddingLeft": {
							type: Number,
							default: 0
						},
						//右边距
						"paddingRight": {
							type: Number,
							default: 0
						},
						/**
						 * 轮播图片数组
						 * "id": 图片ID
						 * "image": 图片地址
						 * "isMinApp":  1 内部链接 2小程序链接
						 * "h5Link":  H5页面跳转地址 内部链接时赋值
						 * "gh_id": 小程序原始ID 2小程序链接时赋值
						 * "minAppLink": 小程序页面跳转地址
						 * "text":  链接名称
						 */
						"list": [],
						// 选择样式 未实现
						"chooseStyle": {
							type: String,
							default: '2'
						}
					}
				}
			}
		},
		data() {
			return {
				// 轮播图设置
				// swiperOption: {
				// 	autoplay: true,
				// 	// loop: true,   loop模式第二轮循环的时候第一张会闪烁
				// 	delay: 3000,
				// 	observer: true,
				// 	// autoHeight: true,
				// 	pagination: {
				// 		el: '.swiper-pagination',
				// 	}
				// },
				current: 0,
				mode: 'dot',
				dotsStyles: {
					backgroundColor: 'rgba(0, 0, 0, .3)',
					border: '1px rgba(0, 0, 0, .3) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
					selectedBorder: '1px rgba(0, 0, 0, .9) solid'
				}
			}
		},
		// components: {
		// 	Swiper,
		// 	SwiperSlide
		// },
		computed: {
			// 初始化
			swiper() {
				return this.$refs.mySwiper.swiper;
			},
			/** 样式 */
			wrapper_style() {
				const {
					paddingTop,
					paddingBottom,
					paddingLeft,
					paddingRight,
					bgColor
				} = this.data;
				return `
				            background-color: ${bgColor};
				            padding-top: ${paddingTop}px;
				            padding-bottom: ${paddingBottom}px;
				            padding-left: ${paddingLeft}px;
				            padding-right: ${paddingRight}px;
				        `;
			},
			img_style() {
				const {
					pictureBorder,
					paddingTop,
					paddingBottom
				} = this.data;
				let height = 200 - paddingTop - paddingBottom;
				return `
							width: 100%;
				            border-radius: ${pictureBorder}px;
							height: ${height}px;
				        `;
			},
			// 广告轮播列表
			list() {
				try {
					let list = [...this.data.list] || [];
					list = list.filter(item => item.image != '');
					return list;
				} catch (err) {
					return [];
				}
			}
		},
		methods: {
			// 滑动切换
			change(e) {
				this.current = e.detail.current
			},
			// 页面跳转
			navigateTo(item) {
				if (item.isMinApp == 1) {
					//H5链接跳转
					uni.navigateTo({
						url: '/pages/webView/webView?url=' + encodeURIComponent(item.h5Link),
						animationType: 'fade-in'
					});
				} else if (item.isMinApp == 2) {
					// 小程序链接跳转
					uni.navigateTo({
						url: item.minAppLink,
						animationType: 'fade-in'
					});
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.component-wrapper {
		display: block;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		width: 100%;
		overflow: hidden;

		img {
			width: 100%;
		}
	}

	.swiper-box {
		height: 200px;
	}
</style>
